import LineChart from '@/components/LineChart';
import * as c from '@/services/consts';
import * as api from '@/services/vpnServerMonitor';
import ProCard from '@ant-design/pro-card';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Col, Row, Tag } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

type VpnServerFormProps = {
  visible: boolean;
  current: API.VpnGroupMonitorModel | undefined;
  code: string | undefined;
  productId: string | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, current, onCancel, code, productId } = props;

  if (!visible) {
    return null;
  }

  const formRef = useRef<ProFormInstance>();

  const [data, setData] = useState<API.UserStatChartItem[] | undefined>(
    undefined,
  );

  const loadDataDo = async () => {
    const result = await api.groupOnlinelist(
      {
        code: current?.code ?? code,
        productId: productId == c.DefaultOptionAll.key ? '' : productId,
      },
      undefined,
      undefined,
    );

    if (result && result.success) {
      setData(result.data);
    }
  };

  useEffect(() => {
    loadDataDo();
  }, []);

  return (
    <DrawerForm<API.VpnServerMonitorModel>
      open={visible}
      initialValues={current}
      title={
        <span>
          分组日最大在线{' '}
          {code == '__vip__' ? (
            <Tag color="blue">VIP分组</Tag>
          ) : code == '__free__' ? (
            <Tag color="blue">Free分组</Tag>
          ) : code == '__total__' ? (
            <Tag color="blue">全部分组</Tag>
          ) : (
            <>
              <Tag color="blue">{current?.name}</Tag>
              <Tag color="blue">{current?.code}</Tag>
            </>
          )}
        </span>
      }
      formRef={formRef}
      autoFocusFirstInput
      width={1200}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        closable: false,
        onClose: onCancel,
        // maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={12}></Col>
        <Col span={12}></Col>

        <Col span={24}>
          <ProCard>
            <LineChart
              data={data ?? []}
              xfield="date"
              yfield="count"
              seriesField="title"
              height={600}
              displayLabel={{}}
              displayPoint={true}
              backColor={undefined}
            />
          </ProCard>
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
